<template>
	<view class="content">
		<view class="input-group">
			<input v-model="username" @blur="checkUsername" placeholder="请输入用户名"/>
			<input v-model="password" @blur="checkPassword" placeholder="请输入用户密码"/>
			<input v-model="mobile" @blur="checkMobile" placeholder="请输入手机号"/>
			<input v-model="phone" @blur="checkPhone" placeholder="请输入座机号"/>
			<input v-model="email" @blur="checkEmail" placeholder="请输入邮箱"/>
			<input v-model="idcard" @blur="checkIdcard" placeholder="请输入身份证号"/>
			<input v-model="passport" @blur="checkPassport" placeholder="请输入护照号"/>
			<input v-model="postcode" @blur="checkPostcode" placeholder="请输入邮编"/>
			<input v-model="url" @blur="checkUrl" placeholder="请输入图片地址"/>
		</view>
		<view class="bg-group">
			<view class="bg blue">天空蓝</view>
			<view class="bg green">生鲜绿</view>
			<view class="bg red">热情红</view>
			<view class="bg pink">魅力粉</view>
			<view class="bg orange">活力橙</view>
			<view class="bg gold">高端金</view>
			<view class="bg purple">浪漫紫</view>
			<view class="bg cyan">典雅青</view>
		</view>
	</view>
</template>

<script>
	import util from '@/utils/util';
	export default {
		data() {
			return {
				username: '',
				password: '',
				mobile: '',
				phone: '',
				email: '',
				idcard: '',
				passport: '',
				postcode: '',
				url: ''
			}
		},
		methods: {
			checkUsername(){
				util.username(this.username);
			},
			checkPassword(){
				// 密码最少六位，大小写字母+数字（至少两种）
				// util.password(this.password);
				// 密码最少六位，大小写字母+数字+特殊字符（至少三种）
				// util.password(this.password, 6, 3);
				// 密码最少八位，必须包含大小写字母、数字和特殊字符
				util.password(this.password, 8, 4);
			},
			checkMobile(){
				util.mobile(this.mobile);
			},
			checkPhone(){
				util.telphone(this.phone);
			},
			checkEmail(){
				util.email(this.email);
			},
			checkIdcard(){
				util.idcard(this.idcard);
			},
			checkPassport(){
				util.passport(this.passport);
			},
			checkPostcode(){
				util.postcode(this.postcode);
			},
			checkUrl(){
				console.log('路径是否全', util.containsHttp(this.url));
			}
		}
	}
</script>

<style>
.content{
	.input-group{}
	.bg-group{
		.bg{
			width: 100%;
			height: 80rpx;
			color: #fff;
			text-align: center;
			justify-items: center;
		}
		.blue{
			background: linear-gradient(to right, #0085ff, #0055ff);
		}
		.green{
			background: linear-gradient(to right, #80ff00, #00ff00);
		}
		.red{
			background: linear-gradient(to right, #ff4500, #ff0000);
		}
		.pink{
			background: linear-gradient(to right, #ffcccc, #ffaacc);
		}
		.orange{
			background: linear-gradient(to right, #ff9111, #ff6a11);
		}
		.gold{
			background: linear-gradient(to right, #aa9933, #cc9933);
		}
		.purple{
			background: linear-gradient(to right, #994099, #990099);
		}
		.cyan{
			background: linear-gradient(to right, #99ffff, #66ffff);
		}
	}
}
</style>
